<template>
    <div>
       <div class="explain">注:音乐链接有效时间为两小时,若歌曲播放不了请删除重新添加</div>
       <div class="title flex">
           <div> 单曲({{Songs.length}})</div>
           <i class="el-icon-delete" @click="DELETEALL()"></i>  
       </div>
        <button  v-for="item in Songs" :key="item.id" class="ListOne flex" @click.stop="PlayById(item.id)" >
            <font-awesome-icon icon="music" v-if="PlayNow.id == item.id" class="icon"/>
            <div class="overflow name flex" :style="getStyle(item.id)">
              <p>{{item.name}}</p>
              <p style="font-size:14px" class="overflow">-{{item.singer}}</p></div>
            <i class="el-icon-delete" @click.stop="deleteSong(item.id)"></i>
        </button>
    </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     computed:{
       ...mapState('Music',['Songs','PlayNow'])
     },
     methods:{
        ...mapMutations('Music',['SETLIST','DELETEALL']),
        ...mapActions('Music',['deleteSong','PlayById']),
        getStyle(id){
          if(id == this.PlayNow.id)
          return{color:'#DDA0DD'}
        }
     }
  }
</script>
<style scoped lang='less'>
.explain{
   color: white;
   font-size: 14px;
   margin-bottom: 10px;
}
.title{
  width: 100%;
  text-align: left;
 
  color: white;
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid white;

  flex-wrap: nowrap;
  justify-content: space-between;

}
.ListOne{
    width: 100%;
    height: 50px;
    justify-content: flex-start;
    position: relative;
    color: white;
    font-size: 18px;
    text-align: left;
   .icon{
      margin-right: 5px;
      color: #DDA0DD;
   }
   .name{
      width: 80%;
      letter-spacing: 0;
      font-weight: 600;
      justify-content: flex-start;
      flex-wrap: nowrap;
     
   }
   i{
      position: absolute;
      right: 5px;
   }
    
}

</style>